<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding: 0 0 0 0">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <h3 style="margin: 20px 0 0 30px; color: aliceblue">小区管理系统</h3>
          <el-menu-item index="1" style="margin-left: 1100px"
            ><router-link to="/notice2" class="a" replace
              >公告信息</router-link
            ></el-menu-item
          >
          <el-menu-item index="2" style="margin:20px 0 0 30px">
            <el-button
              key="warning"
              type="warning"
              link
              @click="handel"
              >退出</el-button
            ></el-menu-item
          >
        </el-menu>
      </el-header>
      <el-container style="padding: 0 0 0 0">
        <el-aside width="250px">
          <el-col>
            <el-menu
              background-color="#545c64"
              class="el-menu-vertical-demo"
              style="height: 870px"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="1" active-text-color="#ffd04b">
                <el-icon><HomeFilled /></el-icon>
                <router-link to="/household" class="a" replace>户主管理</router-link>
              </el-menu-item>
              <el-sub-menu index="2">
                <template #title><el-icon><ChatLineRound /></el-icon>公告管理</template>
                <el-menu-item index="2-1">
                  <router-link to="/notice1" class="a" replace>公告信息发布详情</router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link to="/notice2" class="a" replace>公告信息详情</router-link>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item index="3">
                <el-icon><Document /></el-icon>
                <router-link to="/message" class="a" replace>留言管理</router-link>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon><Avatar /></el-icon>
                <router-link to="/stranger" class="a" replace>陌生人员管理</router-link>
              </el-menu-item>
              <el-menu-item index="5">
                <el-icon><Avatar /></el-icon>
                <router-link to="/material" class="a" replace>物资管理</router-link>
              </el-menu-item>

              <el-menu-item index="6">
                <el-icon><Avatar /></el-icon>
                <router-link to="/robotChat" class="a" replace>机器人聊天管理</router-link>
              </el-menu-item>


            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件渲染在这-->
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {
  Document,
  Menu as ChatLineRound,
  HomeFilled,
  Avatar,
} from "@element-plus/icons-vue";
import router from "../router"
import { ref } from "vue";

const handel = () => {
  window.localStorage.removeItem("uid");
  window.localStorage.removeItem("uname");
  router.push("/")
}
const activeIndex = ref("1");
</script>
<style>
.flex-grow {
  flex-grow: 1;
}
.a {
  text-decoration: none;
  color: white;
}
</style>
